<template>
<div class='NavGuide'>
    <div
      v-for="(item,index) in navlist"
      :key="index"
      :class="index==current?'active':''"
      @click="changenavguide(item)"
      >
      <p>
      <i :class="item.icon"></i>
        {{item.title}}
      </p>
    </div>
</div>
</template>

<script>
export default {
  name: 'NavGuide',
  components: {},
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      navlist: [
        { title: '专题导览', val: 'ztdl', icon: 'iconfont icon-liebiao', path: '/' },
        { title: '指标监测', val: 'zbjc', icon: 'iconfont icon-xinxiinfo21', path: '/monitoringindex/ttyd' },
        { title: '图斑详情', val: 'tbxq', icon: 'iconfont icon-sousuo', path: '' }
      ]
    }
  },
  computed: {
    // 空间选择名称（地图下钻同步）
    curregionobj: {
      set (val) {
        this.$store.state.regionobj = val
      },
      get () {
        return this.$store.getters.curregionobj
      }
    }
  },
  watch: {},
  methods: {
    changenavguide (obj) {
      // if (obj.val == 'zbjc') {
      //   // 把地图上的名称重置为北京市
      //   // this.curregionobj = [{ regionname: '北京', regioncode: '110000' }]
      //   // this.$store.dispatch('changereturnstate', true)
      //   // this.$store.dispatch('changeregionlevel', '1')
      //   // this.$store.dispatch('changeregioncode', '110000')

      //   // // 指标项重置为0
      //   // this.$store.dispatch('changeindex', 0)
      // }
      if(obj.val == 'zbjc'){
        this.$store.dispatch('changeregionlevel', '3')
        this.$router.go(-1)
      }
      this.$router.push(obj.path)
    }
  }
}
</script>
<style lang='stylus' scoped>
.NavGuide
  width 100%
  height 100%
  display flex
  flex-direction column

  div
    flex 1
    font-size 18px
    background #2f3c5d
    flex 1
    width 60px
    position relative
    color #676c79
    font-weight bold
    cursor pointer
    display flex
    flex-direction column
    justify-content center
    align-items center
    // 激活的背景色
    &.active
      background-color #0a1a41
      color #fff
    // 三角形样式 平行四边形样式
    &:before
      background #000
      content ''
      display block
      border-left 60px solid #2f3c5d
      // border-right 30px solid #2f3c5d
      // border-top 30px solid #2f3c5d
      position absolute
      left 0
      top 0
    &:after
      background #000
      content ''
      display block
      // border-left 30px solid #2f3c5d
      border-right 60px solid #2f3c5d
      // border-top 30px solid #2f3c5d
      position absolute
      left 0
      bottom 0

    // 三角形样式 平行四边形样式
    &.active:before
      border-bottom 25px solid #0a1a41
      color #fff
    &.active:after
      border-top 25px solid #0a1a41
      color #fff

    p
      width 18px
      // font-size 18px
      height 100%
      // display flex
      display: -webkit-box
      flex-direction column
      justify-content center

</style>
